<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件管理</title>
</head>

<body>

  <div id="app">
    <div>{{title}}</div>

    <!-- 查询的部分 -->
    <div>
      文件类型：
      <!-- <input type="text" v-model="queryInfo.contentType"> -->
      <select v-model="queryInfo.contentType">
        <option v-for="d in types" :value="d.value">
          {{d.text}}
        </option>
      </select>

      文件描述：
      <input type="text" v-model="queryInfo.fileinfo">
      文件名称：
      <input type="text" v-model="queryInfo.filename">

      <button @click="query">查询</button>
    </div>


    <div v-if="!loading">
      <button @click="openFile">选择文件...</button>
      <span v-if="file">{{file.name}}</span>
      <input type="text" v-model="fileinfo">

      <button :disabled="!file" @click="uploadFile">文件上传</button>

      <span v-if="imgdata.length>0">
        <img style="width:5rem" :src="imgdata" alt="">
      </span>

    </div>

    <div v-if="loading">文件上传中，请稍侯...</div>
    <hr>
    <!-- 显示的部分 -->
    <table>
      <thead>
        <tr>
          <th>文件名</th>
          <th>文件类型</th>
          <th>文件大小</th>
          <th>文件描述</th>
          <th>上传时间</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="d in list">
          <td>{{d.filename}}</td>
          <td>{{d.contentType}}</td>
          <!-- 将文件大小通过filter转换kb/mb/gb，小数位保留两位 -->
          <td>{{d.fileSize}}</td>
          <td>{{d.fileinfo}}</td>
          <td>{{d.lastupdate | formatDate}}</td>
          <td>
            <button @click="copyUrl(d)">复制文件链接</button>
            <button @click="download(d)">下载</button>
            <button @click="del(d)">删除</button>

            <!-- {{isImg(d)}} -->

            <button v-if="isImg(d)" @click="showImg(d)">预览</button>

          </td>
        </tr>
      </tbody>

      <!-- 
        1:选择文件对话框，选文件
        2:上传文件就会获取到文件的fid
        3:通过id获取完整的地址赋值给用户信息的img字段
        4:修改用户信息
      -->

    </table>

    <div>
      <!-- 
        {{list}}
      <br> -->
      {{page}}

      <!-- <img src="https://huhuiyu.top/teach_project_service/user/file/download?fid=167" alt=""> -->
    </div>


    <div v-if="preimg.length>0">
      <img style="width:15rem" :src="preimg" alt="">
    </div>


  </div>

  <script src="../lib/vue.min.js"></script>
  <script src="../lib/axios.min.js"></script>
  <script src="../lib/qs.min.js"></script>
  <script src="../lib/spark-md5.min.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../js/filters.js"></script>

  <script src="js/file.js"></script>

</body>

</html>